<template>
    <div>
      <el-container>
        <el-aside width="150px">
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            background-color="#dee2e6"
            text-color="#495057"
            active-text-color="#862e9c"
            style="text-align: left;">
            <el-menu-item index="1" @click="getMypublishFn">
              <span slot="title">我的发布</span>
            </el-menu-item>
            <el-menu-item index='2' @click="isAuditFn">
              <span slot="title">待审核</span>
            </el-menu-item>
            <el-menu-item index='3' @click="notAuditFn">
              <span slot="title">未通过审核</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <el-row v-if="storeList.length !== 0">
          <el-col :span="6" v-for="store in storeList" :key="store.id" >
              <div class="grid-content bg-purple" @click="lookstore(store.id)">
                <i class="el-icon-delete grid-icon" @click.stop="deleteStoreFn(store.id)"></i>
                <img v-lazy="store.product_img" alt="" class="storeinfo-img" :key="store.id">
                <p class="storename">{{store.product_name}}</p>
                <p v-if="store.price.indexOf('.') === -1" class="price">￥{{ store.price }}.00</p>
                <p v-else class="price">￥{{ store.price }}</p>
                <p v-if="store.Author" class="author"> {{ store.Author }}</p>
              </div>
            </el-col>
          </el-row>
          <el-row v-else class="nothingrow">
            <img src="../../../assets/nothing.png" alt="" class="nothingimg">
          </el-row>
        </el-main>
      </el-container>
    </div>
  </template>

<script>
import { getuserPublishAPI, getisauditstoreAPI, getnoauditstoreAPI, getstoreByid, deletstoreinfoAPI } from '@/api'
import { mapMutations } from 'vuex'
export default {
  name: 'store-info',
  data () {
    return {
      storeList: []
    }
  },
  mounted () {
    this.getStoreList()
  },
  methods: {
    async getStoreList () {
      const { data } = await getuserPublishAPI()
      if (data.status !== 0) return this.$message.error(data.message)
      this.storeList = data.data
    },
    getMypublishFn () {
      this.getStoreList()
    },
    // 查找待审核商品
    async isAuditFn (category) {
      const { data } = await getisauditstoreAPI()
      this.storeList = []
      if (data.status !== 0) {
        return this.$message.error('暂无商品信息')
      }
      this.storeList = data.data
    },
    // 查找未通过审核商品
    async notAuditFn () {
      const { data } = await getnoauditstoreAPI()
      this.storeList = []
      if (data.status !== 0) {
        return this.$message.error(data.messgae)
      }
      this.storeList = data.data
    },
    ...mapMutations(['getstoredetail']),
    // 按id查看商品详情
    lookstore (id) {
      this.$router.push('/storedetail')
      getstoreByid(id).then(({ data }) => {
        this.getstoredetail(data.data)
      })
    },
    deleteStoreFn (id) {
      deletstoreinfoAPI(id).then(({ data }) => {
        if (data.status !== 0) return this.$message.error(data.message)
        this.$message.success('已移除')
        this.getStoreList()
      })
    }
  }
}
</script>

  <style scoped>
   .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      /* height: 600px; */
      height: 100%;
      border-radius: 10px;
      line-height: 200px;
      overflow: hidden;
    }
    .iptitem {
      margin-bottom: 10px;
    }
    .el-main {
      background-color: #E9EEF3;
      color: #333;
      height: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0px;
    }
    .el-menu{
      height: 100%;
    }
    .grid-content {
      position: relative;
      height: 330px;
      margin-bottom: 30px;
      margin-left: 10px;
      border-radius: 10px;
      background-color: #fff;
    }
    .grid-content:hover {
      background-color: #fff9f5;
      border-radius: 10px;
    }
    .storename {
      margin-left: 3%;
      width:95%;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor:pointer;
      font-weight: 600;
      font-size: 14px;
      color: #333;
    }
    .storename:hover {
      text-decoration: underline;
    }
    .storeinfo-img {
      display: inline-block;
      height: 230px;
      width: 95%;
      margin-left: 2%;
      object-fit: fill;
      cursor: pointer;
      border-radius: 10px;
      margin-top: 3px;
    }
    .grid-content span {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      opacity: .6;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      font-size: 12px;
      cursor:pointer;
    }
    .author {
      margin: 0;
      padding: 0;
      margin-right: 15px;
      position: absolute;
      right: 0px;
      bottom: 5px;
      color: #888;
      font-size: 12px;
      cursor: pointer;
    }
  .price {
    color:red;
    margin: 0;
    font-weight: 700;
    font-size: 18px;
    position: absolute;
    bottom: 5px;
  }

    ::v-deep .el-input__inner {
      width: 350px;
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
    }
    .nothingrow {
        display: flex;
        justify-content: center;
    }
    .nothingimg {
        width: 500px;
        height: 500px;
    }
    .grid-icon {
      position: absolute;
      right: 2px;
      color:red;
      background-color: #ffa8a8;
      opacity: .4;
      cursor: pointer;
      display: none;
    }
    .grid-content:hover .grid-icon{
      display: block;
    }
  </style>
